<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="addAppForm" ref="addAppRef" :rules="addApprules">
      <el-form-item label="密码" :label-width="formLabelWidth" prop="newPassword">
        <el-input v-model="addAppForm.newPassword" type="password" autocomplete="off" ref="mobile" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";

import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, ElMessage },

  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      personnelType: "",
      baseRoleList: [],
      teacherId: '',
      addAppForm: {
        newPassword: "",
      },
      // 校验规则
      addApprules: {
        newPassword: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },

    clear() {
      this.dialogFormVisible = false;
      this.addAppForm.name = "";
      this.addAppForm.sex = "";
      this.addAppForm.mobile = "";
    },
    save() {
      console.log(this.teacherId, this.addAppForm.newPassword);
      this.$refs.addAppRef.validate((valid) => {
        if (valid) {

          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("id", this.teacherId);
          params.append("newPassword", this.addAppForm.newPassword);
          httpService("/javaApi/baseTeacher/resetPassword", params, "post").then(
            (data) => {
              if (data.code == 200) {
                ElMessage.success("修改成功");
                this.clear();
                //刷新父组件的数据
                this.$parent.getBaseTeacherListApp();
              } else {
                ElMessage.error("修改失败");
              }
            }
          );
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
</style>